<template>
	<view class="container">
		<view class="topBAr">
	<!-- F1上半部分 -->
	<!-- 用户登陆时状态 -->
	<view class="me_top" >
		<view v-if="$phone" class="me_top_t">
		<!-- 头像个人信息部分 -->
		<view class="me_message_left" >
			<image src="../../static/detail/avatar.jpg" mode="widthFix" class="my_image"></image>
		</view>
		<view class="me_message_right">
			<text class="text">用户名:{{username}}</text>
			<text class="text">手机号:{{phone}}</text>
			<text class="text tuichu" @click="Goclear" >退出登陆</text>
		</view>
		</view>
		
		<!-- 用户未登录时状态 -->
		<view v-else class="me_top_t">
		<!-- 头像个人信息部分 -->
		<view class="me_message_left">
			<image src="../../static/detail/avatar2.jpg" mode="widthFix" class="my_image"></image>
		</view>
		<view class="me_message_right">
			<text class="text"> 用户名:用户未登录</text>
			<text class="text">手机号:登陆后获取</text>
			<text class="text tuichu" @click="GoLogin" >点击登录</text>
		</view>
		
		</view>
	</view>
	<!-- 分享框 -->
	   <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
	    <uni-popup-share></uni-popup-share>
	   </uni-popup>
			<!-- F2下半部分 -->
			<view class="me_bottom">
				<uni-section title="我的订单" type="line" padding>
					<!-- <template v-slot:right> -->
					<!-- <uni-icons type="right"></uni-icons> -->
					<!-- </template> -->
					<uni-grid :column="4" :highlight="false" @change="changed" :showBorder="false">
						<uni-grid-item :index="0">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons custom-prefix="iconfont" type="icon-shoucang" :size="28" color="#a397fd" />
								<text class="text">我的收藏</text>
							</view>
						</uni-grid-item>
						<uni-grid-item :index="1">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons custom-prefix="iconfont" type="icon-daifahuo" :size="28" color="#a397fd" />
								<text class="text">待发货</text>
							</view>
						</uni-grid-item>
						<uni-grid-item :index="2">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons custom-prefix="iconfont" type="icon-daishouhuo" :size="28" color="#a397fd" />
								<text class="text">待收货</text>
							</view>
						</uni-grid-item>
						<uni-grid-item :index="3">
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons custom-prefix="iconfont" type="icon-a-31tuikuantuihuo" :size="28"
									color="#a397fd" />
								<text class="text">已签收</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
		</view>
		<!-- 我的服务部分 -->

		<view class="me_bottom_fuwu">
			<uni-section title="我的服务" type="line" padding>
				<!-- <template v-slot:right> -->
				<!-- <uni-icons type="right"></uni-icons> -->
				<!-- </template> -->
				<uni-grid :column="4" :highlight="true" @change="change" :showBorder="false">
					<uni-grid-item :index="0">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-wodeyouhuijuan" :size="28" color="#cdcdcd" />
							<text class="text">优惠卷</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="1">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-31jifen" :size="28" color="#cdcdcd" />
							<text class="text">我的积分</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="2">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-31zuji" :size="28" color="#cdcdcd" />
							<text class="text">我的足迹</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="3">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-dizhi" :size="28" color="#cdcdcd" />
							<text class="text">收货地址</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="4">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-kefu" :size="28" color="#cdcdcd" />
							<text class="text">帮助与客服</text>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="5">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-hezuo" :size="28" color="#cdcdcd" />
							<text class="text">商务合作</text>
						</view>
					</uni-grid-item>
				<uni-grid-item :index="6">
				      <view class="grid-item-box" style="background-color: #fff;" @click="shareToggle">
				       <uni-icons custom-prefix="iconfont" type="icon-fenxiang" :size="28" color="#cdcdcd" />
				       <text class="text" >分享好友</text>
				 </view>
				 </uni-grid-item>
					<uni-grid-item :index="7">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons custom-prefix="iconfont" type="icon-guanyuwomen" :size="28" color="#cdcdcd" />
							<text class="text">关于我们</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
	</view>
</template>

<script>
	// import zgzMytop from '@/components/zgzMytop/zgzMytop.vue'
	export default {
		data() {
			return {
              username:'用户未登录',
				phone:''
			}
		},
		onLoad() {
    this.username=this.$username
			this.phone=this.$phone
		},
		methods: {
			shareToggle() {
			    this.$refs.share.open()
			   },
			Goclear(){
				uni.removeStorageSync('username')
				uni.removeStorageSync('phone')
				uni.removeStorageSync('uid')
				//3秒后进行刷新页面
				this.$Pagesfresh()
			},
			GoLogin(){
				uni.navigateTo({
					url:'/pages/RegisterLogin/RegisterLogin'
				})
				
			},
			change(e) {
				let {index} = e.detail
				// this.list[index].badge && this.list[index].badge++
				console.log(index + 1) //index为宫格下标
				if(index+1===5){
					
					uni.navigateTo({
						url:'/pages/KeFu/KeFu?id=1'
					})
					window.location.reload()
				}
				console.log(this.username)
				let fwid = index + 1
				    uni.navigateTo({
				     url: fwid == 1 ? '/pages/coupn/coupn' : fwid == 3 ? '/pages/footprint/footprint' : fwid == 2 ?
				      '/pages/integral/integral' : fwid == 4 ? '/pages/AddAddress/AddAddress' :fwid == 6 ? '/pages/Shophezu/Shophezu' :fwid == 8 ? '/pages/Aboutme/Aboutme' :''  })			
			},
			changed(e) {
				let {
					index
				} = e.detail
				// this.list[index].badge && this.list[index].badge++
				console.log(index + 1) //index为宫格下标
				let myid=index+1
								uni.navigateTo({
									url:'/pages/order/order?index='+myid
								})
			}

		}
	}
</script>

<style lang="scss">
	.container {
		.me_top {
			.me_top_t{
			display: flex;
			padding: 10px;
		
			.me_message_left {
				height: 60%;
				box-sizing: border-box;
		
				.my_image {
					margin: 10px;
					width: 180rpx;
					border-radius: 50%;
				}
			}
		
			.me_message_right {
				box-sizing: border-box;
				height: 100%;
				display: flex;
				flex-direction: column;
				margin: 10px 20px;
		
				.text {
					line-height: 60rpx;
					width: 100%;
					color: white;
					font-size: 14px;
				}
				.tuichu{
					    display: inline-block;
					    margin-top: 10px;
					text-align: center;
					border: 1px solid transparent;
					box-shadow: 4px 6px 10px black;
				}
			}
			}
		}
		.topBAr {
			background-image: url(@/static/detail/1.jpg);
			height: 500rpx;
			width: 100%;
			display: flex;
			flex-direction: column;



			.me_bottom {
				width: 100%;
				height: 100rpx;



				.grid-item-box {
					flex: 1;
					// position: relative;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;

					.text {
						font-size: 12px;
					}
				}

			}


		}

		.me_bottom_fuwu {
			margin-top: 40px;
			// border: 1px solid red;

			.grid-item-box {
				flex: 1;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;

				.text {
					font-size: 12px;
					color: #868686;
				}
			}

		}
	}
</style>
